Skip to content

Comments

feat: tool call UI, inline diffs, collapsible code blocks#229

Merged
akhileshrangani4 merged 3 commits intomainfrom
feat/tool-call-ui
Feb 21, 2026
Merged

feat: tool call UI, inline diffs, collapsible code blocks#229
akhileshrangani4 merged 3 commits intomainfrom
feat/tool-call-ui

Conversation

@akhileshrangani4
Copy link
Collaborator

@akhileshrangani4 akhileshrangani4 commented Feb 20, 2026

Summary

  • Tool call UI: AI tool invocations (readFile, listFiles, searchFiles, webSearch) now render as collapsible inline items in chat messages with loading/done/error states
  • Backend file tools: Added readFile, listFiles, searchFiles tools so the AI can inspect project files, with multi-step tool calling via stopWhen: stepCountIs(5)
  • Inline diff rendering: Aider SEARCH/REPLACE markers render as editor-style line-by-line diffs using LCS, with green/red gutter bars matching the Monaco editor
  • Collapsible code blocks: Code blocks in chat collapse to ~4 lines with a gradient fade and expand toggle; shimmer bar animates while streaming
  • Paste fix: shouldTreatAsContext was too aggressive — normal text with parentheses or 3 lines would become a context tab. Now requires 2+ signals to trigger

Changes

Area Files
Tool call UI message.tsx, tool-invocation.tsx, types.ts, chat-provider.tsx, index.tsx
Backend tools tools.ts, ai.ts
Diff rendering diff.ts, body.tsx, context.tsx, globals.css
Collapsible code collapsible-code.tsx, use-syntax-highlighting.ts, code-block/index.tsx, markdown.tsx
Paste fix utils.ts

Test plan

  • Send a chat message that triggers tool calls — verify they render inline with spinner → check icon
  • Click a tool invocation to expand and see args/result
  • Verify code blocks with aider diff markers show green/red line-by-line diffs
  • Long code blocks in chat should collapse to ~4 lines with "Show N lines" button
  • Paste normal text (e.g. a URL or short sentence) — should paste inline, not as context tab
  • Paste a large code snippet — should still become a context tab

Add file tools (readFile, listFiles, searchFiles) to the AI backend
with multi-step support via stopWhen, and render tool invocations as
collapsible inline elements in assistant messages.

- Add createFileTools() with readFile, listFiles, searchFiles tools
- Enable multi-step tool calling with stopWhen: stepCountIs(5)
- Preserve UIMessage parts through the Message type and chat provider
- Create ToolInvocation component for inline tool call display
- Render tool parts interleaved with text in MessageContent
Parse <<<<<<< SEARCH / ======= / >>>>>>> REPLACE markers into
color-coded added/removed lines with gutter indicators instead of
showing raw diff syntax.
@vercel
Copy link

vercel bot commented Feb 20, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
gitwit-production Ready Ready Preview, Comment Feb 20, 2026 7:43pm

- Code blocks in chat collapse to ~4 lines with gradient fade and
  expand toggle, with a shimmer bar while streaming
- Fix shouldTreatAsContext being too aggressive — now requires 2+
  signals instead of any single match like a bare parenthesis
- Modularize code-block into diff.ts, use-syntax-highlighting.ts,
  and collapsible-code.tsx
@akhileshrangani4 akhileshrangani4 changed the title feat: tool call UI and diff rendering in chat feat: tool call UI, inline diffs, collapsible code blocks Feb 20, 2026
@akhileshrangani4 akhileshrangani4 merged commit f5d3d4f into main Feb 21, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant